<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">订单</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">查看订单</a></el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>

      <!-- 步骤条 -->
      <el-steps :active="active+1" finish-status="success" align-center>
        <el-step :title="item.title" :description="item.description| dateFormat" v-for="item in stepData" :key ="item.index"></el-step>
      </el-steps>

        <el-row  class = "active0" >
          <div>
            
            <!-- 卡片视图 -->
            <el-card>
              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple-dark;">
                    <p>
                      <span class="orderSpan">当前订单状态：待付款</span>
                      <!-- 按钮组2 -->
                      <span style="float:right;">
                          <el-button size="medium">修改发票信息</el-button>
                          <el-button size="medium" @click="updateAddress()">修改收货人信息</el-button>
                          <el-button size="medium" @click="updateGoodsDetails()">修改商品信息</el-button>
                          <el-button size="medium">修改费用信息</el-button>
                          <el-button size="medium">发送站内信</el-button>
                          <el-button size="medium" @click="closeVisible = true">关闭订单</el-button>
                          <el-button size="medium">备注订单</el-button>
                      </span>
                    </p>
                  </div>
                </el-col>
              </el-row>

              <!-- 表格数据1 -->
              <el-row style="margin-top:60px">
                <el-col>
                  <p style="margin-left: 60px;"><span class="el-icon-s-management">基本信息</span></p>
                  <el-table :data="tableData1" border style="width: 90%;margin-left: 60px">
                      <el-table-column prop="id" label="订单编号" width="180"></el-table-column>
                      <el-table-column prop="transaction_id" label="发货单流水号"></el-table-column>
                      <el-table-column prop="username" label="用户账号"></el-table-column>
                      <el-table-column prop="pay_tyoe" label="支付方式">
                        <template slot-scope="scope">
                            <span v-if="scope.row.pay_status === '0'">货到付款</span>
                            <span v-else-if="scope.row.pay_status === '1'">在线支付</span>
                            <span v-else size="small">未支付</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="source_type" label="订单来源">
                        <template slot-scope="scope">
                          <span v-if="scope.row.source_type === '1'">web</span>
                          <span v-else-if="scope.row.source_type === '2'">微信公众号</span>
                          <span v-else-if="scope.row.source_type === '3'">微信小程序</span>
                          <span v-else-if="scope.row.source_type === '4'">H5手机页面</span>
                        </template>
                      </el-table-column>
                  </el-table>

                  <el-table :data="tableData1" border style="width: 90%;margin-left: 60px;margin-top: -2px">
                      <el-table-column prop="pay_type" label="支付类型" width="180">
                        <template slot-scope="scope">
                          <span v-if="scope.row.pay_status === '0'">待付款</span>
                          <span v-else-if="scope.row.pay_status === '1'">待发货</span>
                          <span v-else-if="scope.row.pay_status === '2'">已发货</span>
                          <span v-else-if="scope.row.pay_status === '3'">已完成</span>
                          <span v-else-if="scope.row.pay_status === '4'">已关闭</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="shipping_name" label="配送方式"></el-table-column>
                      <el-table-column prop="shipping_code"  label="物流单号"></el-table-column>
                      <el-table-column prop="takeTimeout" label="自动确认收货时间"></el-table-column>
                      <el-table-column prop="preferentialInfo" label="活动信息" ></el-table-column>
                  </el-table>
                </el-col>
              </el-row>

              <!-- 表格数据2 -->
              <el-row style="margin-top:60px">
                <el-col>
                  <p style="margin-left: 60px;"><span class="el-icon-s-management">收货人信息</span></p>
                  <el-table :data="tableData2" border style="width: 90%;margin-left: 60px;">
                      <el-table-column prop="receiverContact"  label="收货人" width="180"></el-table-column>
                      <el-table-column prop="receiverMobile"  label="手机号码"></el-table-column>
                      <el-table-column prop="receiverCode" label="邮政编码"></el-table-column>
                      <el-table-column prop="receiverAddress" label="收货地址" ></el-table-column>
                  </el-table>

                </el-col>
              </el-row>

              <!-- 表格数据3 -->
              <el-row style="margin-top:60px">
                <el-col>
                  <p style="margin-left: 60px;"><span class="el-icon-s-management">商品信息</span></p>
                  <el-table :data="tableData3" border style="width: 90%;margin-left: 60px;">
                      <el-table-column prop="image" label="商品图片" width="130" >
                        <template slot-scope="scope">
                          <img :src="scope.row.image" width="90" height="110">
                        </template>
                      </el-table-column>
                      <el-table-column prop="name" label="商品名称"></el-table-column>
                      <el-table-column prop="snPrice" label="价格/货号" width="100"></el-table-column>
                      <el-table-column prop="attribute" label="属性" width="140"></el-table-column>
                      <el-table-column prop="num" label="数量" width="90"></el-table-column>
                      <el-table-column prop="knum" label="库存" width="140"></el-table-column>
                      <el-table-column prop="money" label="小计" width="220"></el-table-column>
                  </el-table>
                </el-col>
              </el-row>

              <!-- 表格数据4 -->
              <el-row style="margin-top:60px">
                <el-col>
                  <p style="margin-left: 60px;"><span class="el-icon-s-management">费用信息</span></p>
                  <el-table :data="tableData4" border style="width: 90%;margin-left: 60px;">
                      <el-table-column prop="total" label="商品合计" width="180"></el-table-column>
                      <el-table-column prop="postFee" label="运费"></el-table-column>
                      <el-table-column prop="preMoney" width="240" label="优惠券"></el-table-column>
                      <el-table-column prop="specialOffer" label="活动优惠"></el-table-column>
                      <el-table-column prop="orderSumMoney" label="订单总金额"></el-table-column>
                      <el-table-column prop="amountDue" label="应付款金额" ></el-table-column>
                  </el-table>
                </el-col>
              </el-row>

              <!-- 表格数据5 -->
              <el-row style="margin-top:60px">
                <el-col>
                  <p style="margin-left: 60px;"><span class="el-icon-s-mana gement">操作信息</span></p>
                  <el-table :data="tableData5" border style="width: 90%;margin-left: 60px;">
                      <el-table-column prop="operater" label="操作者" width="180"></el-table-column>
                      <el-table-column prop="operateTime" label="操作时间"></el-table-column>
                      <el-table-column prop="orderStatus" label="订单状态"></el-table-column>
                      <el-table-column prop="payStatus" label="付款状态"></el-table-column>
                      <el-table-column prop="consignStatus" label="发货状态"></el-table-column>
                      <el-table-column prop="remarks" label="备注" ></el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </el-card>
          </div>
        </el-row>
    </el-card>

    <!-- 编辑界面 -->
    <el-dialog title="修改收货人信息" :visible.sync="addressVisible" width="50%" @click="closeDialog">
      <el-form label-width="120px" :model="addressForm">
        <el-form-item label="收货人姓名">
          <el-input size="small" v-model="addressForm.receiverContact" auto-complete="off" placeholder="请输入收货人姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input size="small" v-model="addressForm.receiverMobile" auto-complete="off" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="邮政编码">
          <el-input size="small" v-model="addressForm.receiverCode" auto-complete="off" placeholder="请输入邮政编码"></el-input>
        </el-form-item>
         <el-form-item label="所在区域:" label-width="120px">
          <el-select v-model="addressForm.provinceid" @change="change1" placeholder="省" size="small">
              <el-option
                v-for="item in provinces"
                :key="item.provinceid"
                :label="item.province"
                :value="item.provinceid">
              </el-option>
          </el-select>
          <span>-</span>
          <el-select v-model="addressForm.cityid" @change="change2" placeholder="城市" size="small">
              <el-option
                v-for="item in cities"
                :key="item.cityid"
                :label="item.city"
                :value="item.cityid">
              </el-option>
          </el-select>
          <span>-</span>
          <el-select v-model="addressForm.areaid" placeholder="区" @change="change5" size="small">
              <el-option
                v-for="item in areas"
                :key="item.areaid"
                :label="item.area"
                :value="item.areaid">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" label-width="120px">
            <el-input autocomplete="off" v-model="addressForm.receiverAddress" type="textarea" :autosize="{ minRows: 4, maxRows: 6  }"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" class="title" @click="submitForm()">保存</el-button>
      </div>
    </el-dialog>

    <!-- 编辑界面 -->
    <el-dialog title="关闭订单" :visible.sync="closeVisible" width="50%" @click="closeDialog">
      <el-form label-width="120px">
        <el-form-item label="操作备注" label-width="120px">
          <el-input autocomplete="off" v-model="message" type="textarea" :autosize="{ minRows: 6, maxRows: 6 }"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" class="title" @click="closeOrder()">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
    data () {
      return {
        // 添加商品的表单
        lookOrderForm: {},
        // 添加商品的表单规则
        lookOrderFormRules: {},
        active: 0, // 控制步骤条及填写条目的显示
        stepData: [{index: 0, title: '提交订单',description:""},
                  {index: 1, title: '支付订单' ,description: ""},
                  {index: 2, title: '平台发货' ,description: ""},
                  {index: 3, title: '确认收货' ,description: ""},
                  {index: 4, title: '完成评价' ,description: ""}
                  ],
        nextTile:'下一步',
        //传入的订单对象
        order: {},
        tableData1: [], // 表格数据
        tableData2: [],
        tableData3: [],
        tableData4: [],
        tableData5: [],
        searchMap: {},
        searchMap2: {},
        searchMap3: {},
        //下拉框
        provinces: [],
        cities: [],
        cityid: 0,
        areas: [],
        orderId: 0,
        addressVisible: false, //定制模态框信息
        addressForm: {},
        closeVisible: false,
        message: ''//操作描述
      }
    },
    methods: {
      async getOrderList () {
        const { data: res } = await this.$http.get(`/orders/order/lookOrderDetails?id=${this.orderId}`)
        const { data: res2 } = await this.$http.get(`/orders/order/findById?id=${this.orderId}`)
        const { data: res3 } = await this.$http.get(`/user/provinces/findAll`)
        if (res.code !== 200) {
          return this.$message.error("查询失败")
        }
        this.order = res.data.order[0]
        this.tableData1 = res.data.order
        this.tableData2 = res.data.addressDetails
        this.tableData3 = res.data.orderItems
        this.tableData4 = res.data.costInformation
        this.tableData5 = res.data.orderLogs

        this.active = parseInt(this.order.order_status)
        this.stepData[0].description = this.order.create_time
        this.stepData[1].description = this.order.pay_time
        this.stepData[2].description = this.order.consign_time
        this.stepData[3].description = this.order.end_time
        this.stepData[4].description = this.order.close_time
        this.provinces = res3

        console.log(this.order);
      },
      // 关闭编辑、增加弹出框
      closeDialog() { 
        this.addressVisible = false
        this.closeDialog = false
      },
      //修改收货人信息
      async submitForm(){
        this.addressForm.id = this.order.id
        const { data: res } = await this.$http.post(`/orders/order/updateAddress`, this.addressForm)
        if(res.code !== 200){
          return this.$message.error("修改失败")
        }
        this.addressVisible  = false;
        this.$message.success("修改成功")
        this.getOrderList()
      },
      updateAddress(){ // 修改地址信息
        this.addressVisible = true
        this.addressForm = this.tableData2[0]
        console.log(this.addressForm);
      },
      async change1 (val) {
        this.cities = []
        this.areas = []
        this.addressForm.cityid = null
        this.searchMap2.provinceid = val
        const { data: res } = await this.$http.post(`/user/cities/findList`,this.searchMap2)
        this.cities = res
      },
      async change2 (val) {
        this.cities = []
        this.areas = []
        this.searchMap3.cityid = val
        const { data: res } = await this.$http.post(`/user/areas/findList`,this.searchMap3)
        this.areas = res
      },
      change3 (val) {
        if (val === 1) {
          this.addressForm.return_money =  this.addressForm.pay_money+ this.addressForm.post_fee
        }else{
          this.addressForm.return_money =  this.addressForm.pay_money
        }
      },
      change5(){},
      updateGoodsDetails(){//修改商品信息
        //路由跳转
        this.$router.push({
          path: '/order/update_goods_infomation',
          query: {
            orderId: this.order.id
          }
        })
      },
      closeOrder(){
        if(this.message == null && this.message == ''){
          return this.$message.error("请填写备注")
        }
        this.$confirm('此操作将永久关闭该订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const { data: res } = await this.$http.post(`/orders/order/closeOrder?message=${this.message}`,this.order)
          if(res.code !== 200){
            return this.$message.error("关闭失败")
          }
          this.$message({
            type: 'success',
            message: '关闭成功!'
          });
          this.closeVisible = false;
          this.getOrderList()
          this.$router.push({
          path: '/order/order',
          query: {
            orderId: this.order.id
          }
        })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消关闭'
          });    
          this.closeVisible = false;
          this.getOrderList()      
        });
      }
    },
    created () {
        this.orderId = this.$route.query.orderId
        this.getOrderList()
    }
}
</script>

<style scoped>
.next{
  margin-top: 22px;
  margin-bottom: 22px;
  margin-right: 22px;
  float: right;
}
.orderSpan{
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: red;
}
.cl1{
  
}
</style>